﻿/*
 **  jQuery插件，回到页面顶部按钮
 */
(function ($, window, document, undefined) {
  //定义MyPlugin的构造函数
  var MyPlugin = function (element, options) {
    this.$element = element;
    this.$window = $(window);
    this.defaults = {
      scrollDistance: 200,
      scrollSpeed: 400,
      animationSpeed: 300,
    };
    this.options = $.extend({}, this.defaults, options);
  };
  //定义MyPlugin的方法
  MyPlugin.prototype = {
    returnTop: function () {
      var _self = this;
      var triggerVisible = false;
      this.$window.scroll(function () {
        if (_self.$window.scrollTop() > _self.options.scrollDistance) {
          if (!triggerVisible) {
            _self.$element.fadeIn(_self.options.animationSpeed, function () {
              _self.$element.css({ display: "flex" });
            });
            triggerVisible = true;
          }
        } else {
          if (triggerVisible) {
            _self.$element.fadeOut(_self.options.animationSpeed);
            triggerVisible = false;
          }
        }
      });
      //当点击跳转链接后，回到页面顶部位置
      this.$element.click(function (e) {
        e.preventDefault();
        $("body,html").animate(
          {
            scrollTop: 0,
          },
          _self.options.scrollSpeed
        );
      });
      // 鼠标悬浮按钮之上，图片消失，文字显示
      this.$element.mouseover(function () {
        _self.$element.children("img").hide();
        _self.$element.children("div").show();
      });
      //鼠标离开，文字消失，图片显示。
      this.$element.mouseout(function () {
        _self.$element.children("div").hide();
        _self.$element.children("img").show();
      });
      //这里return 为了支持链式调用
      return this.$element;
    },
  };

  //在插件中使用MyPlugin对象
  $.fn.returnTop = function (options) {
    //创建MyPlugin的实体
    var myPlugin = new MyPlugin(this, options);
    //调用其方法
    return myPlugin.returnTop();
  };
})(jQuery, window, document);
